<template>
  <div class="home-page">
<!--    <a-row :gutter="10" type="flex" justify="space-between" class="head-info">-->
<!--      <a-col :span="8">-->
<!--       <a-card class="head-info-card">-->
<!--        <p>总销售额</p>-->
<!--        <p style="font-size:34px !important;color:#333;">{{ topSummary.saleNum|toThousands }}</p>-->
<!--        <p style="height:114px;line-height:114px">-->
<!--          <span style="margin-right:20px">周同比 <a-icon :type="saleWeekRateUp ? 'caret-up' : 'caret-down'" :style="{color:saleWeekRateUp?'green':'red'}"/> {{ topSummary.saleWeekRate }} </span>-->
<!--          <span>日环比 <a-icon :type="saleDayRateUp ? 'caret-up' : 'caret-down'" :style="{color:saleDayRateUp?'green':'red'}"/>{{ topSummary.saleDayRate }} </span>-->
<!--        </p>-->
<!--        <p>日均销售额 <span style="margin-left:20px">￥{{ topSummary.saleAvgNum|toThousands }}</span></p>-->
<!--       </a-card>-->
<!--      </a-col>-->
<!--      <a-col :span="8">-->
<!--        <a-card class="head-info-card">-->
<!--          <p>访问量</p>-->
<!--          <p style="font-size:34px !important;color:#333;">{{ topSummary.visitNum|toThousands }}</p>-->
<!--          <apexchart type="area" height="100" :options="visitChartOptions" :series="visitRowsSeries" />-->
<!--          <p>日访问量 <span style="margin-left:20px">{{ topSummary.visitDayNum|toThousands }}</span></p>-->
<!--        </a-card>-->
<!--      </a-col>-->
<!--      <a-col :span="8">-->
<!--        <a-card class="head-info-card">-->
<!--          <p>支付笔数</p>-->
<!--          <p style="font-size:34px !important;color:#333;">{{ topSummary.payNum|toThousands }}</p>-->
<!--          <apexchart type="bar" height="100" :options="payRowsOptions" :series="payRowsSeries" />-->
<!--          <p>转换率 <span style="margin-left:20px">{{ topSummary.payRate }}</span></p>-->
<!--        </a-card>-->
<!--      </a-col>-->
<!--    </a-row>-->
<!--    <a-row class="head-info">-->
<!--      <a-card  title="访问量趋势">-->
<!--        <apexchart type="bar" height="400" :options="visitTrendChartOptions" :series="visitTrendChartSeries" />-->
<!--      </a-card>-->
<!--    </a-row>-->
<!--    <a-row :gutter="10" type="flex" justify="space-between" class="head-info">-->
<!--      <a-col :span="12">-->
<!--        <a-card  title="热门搜索">-->
<!--          <a-row :gutter="20" type="flex" justify="space-between">-->
<!--            <a-col :span="12">-->
<!--              <p>搜索用户数</p>-->
<!--              <p>-->
<!--                <span style="font-size:20px !important;color:#333;margin-right:20px">{{ hotSearchSummary.searchUseNum|toThousands }}</span>-->
<!--                <span>{{ hotSearchSummary.avgSearchNum }}%</span>-->
<!--              </p>-->
<!--              <apexchart type="area" height="100" :options="hotUserNumListOptions" :series="hotUserNumListSeries" />-->
<!--            </a-col>-->
<!--            <a-col :span="12">-->
<!--              <p>人均搜索次数</p>-->
<!--              <p>-->
<!--                <span style="font-size:20px !important;color:#333;margin-right:20px">{{ hotSearchSummary.searchUserRate|toThousands }}</span>-->
<!--                <span>{{ hotSearchSummary.avgSearchRate }}%</span>-->
<!--              </p>-->
<!--              <apexchart type="area" height="100" :options="hotUserAvgSearchNumOptions" :series="hotUserAvgSearchNumSeries" />-->
<!--            </a-col>-->
<!--          </a-row>-->
<!--          <a-table-->
<!--            ref="TableInfo"-->
<!--            rowKey="rank"-->
<!--            :columns="columns"-->
<!--            :dataSource="dataSource"-->
<!--            :pagination="pagination"-->
<!--            :loading="loading"-->
<!--            :scroll="{ x: 400 }"-->
<!--            @change="handleTableChange"-->
<!--          >-->
<!--          </a-table>-->
<!--        </a-card>-->
<!--      </a-col>-->
<!--      <a-col :span="12">-->
<!--        <a-card title="会员类型占比">-->
<!--          <apexchart type="donut" height="408" :options="vipRateOptions" :series="vipRateSeries"/>-->
<!--        </a-card>-->
<!--      </a-col>-->
<!--    </a-row>-->
  </div>
</template>
<script>
// import VueApexCharts from 'vue-apexcharts';
//
// const apiURL = {
//   hotSearchList: '/dashboard/getHotSearchPageList',
//   hotSearchSummary: '/dashboard/hotSearchSummary',
//   topSummary: '/dashboard/topSummary',
//   vipRate: '/dashboard/vipRate',
//   visitTrend: '/dashboard/visitTrend' // 访问量趋势
// };

export default {
  name: 'HomePage',
  // components: { apexchart: VueApexCharts },
  data() {
    return {
      // hotSearchList: [],
      // hotSearchSummary: {},
      // topSummary: {},
      // vipRate: {},
      // visitTrend: [],
      //
      // // 表格
      // dataSource: [],
      // sortedInfo: null,
      // paginationInfo: null,
      // pagination: {
      //   size: 'small',
      //   // pageSizeOptions: ['5'],
      //   defaultCurrent: 1,
      //   defaultPageSize: 5,
      //   showQuickJumper: true,
      //   // showSizeChanger: true,
      //   showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      // },
      // loading: false,
      // vipMap: Object.freeze({
      //   'register': '注册会员',
      //   'month': '月度付费会员',
      //   'quarter': '季度付费会员',
      //   'year': '年度付费会员'
      // }),
      // columns: Object.freeze([
      //   {
      //     title: '排名',
      //     dataIndex: 'rank',
      //     key: 'rank',
      //   },
      //   {
      //     title: '搜索关键词',
      //     dataIndex: 'keyword',
      //     key: 'keyword',
      //   },
      //   {
      //     title: '用户数',
      //     dataIndex: 'userNum',
      //     key: 'userNum',
      //   },
      //   {
      //     title: '周涨幅',
      //     dataIndex: 'weekNum',
      //     key: 'weekNum',
      //   },
      // ])
    };
  },
  // computed: {
  //   saleWeekRateUp () {
  //     const num = parseInt(this.topSummary.saleWeekRate || 0)
  //     return num > 0
  //   },
  //   saleDayRateUp () {
  //     const num = parseInt(this.topSummary.saleDayRate || 0)
  //     return num > 0
  //   },
  //
  //   // 访问量
  //   visitRows () {
  //     return this.topSummary.visitRows || []
  //   },
  //   visitRowsSeries () {
  //     const data = this.visitRows.map(item => { return +item.value })
  //     return [{ name: '当日访问量', data }]
  //   },
  //   visitChartOptions () {
  //     const categories = this.visitRows.map(item => { return item.key })
  //     return {
  //       chart: { toolbar: { show: false } },
  //       xaxis: { categories, labels: { show: false }, axisBorder: { show: false }, crosshairs: { show: false }, axisTicks: { show: false } },
  //       yaxis: { show: false }
  //     }
  //   },
  //
  //   // 支付笔数
  //   payRows () {
  //     return this.topSummary.payRows || []
  //   },
  //   payRowsSeries () {
  //     const data = this.payRows.map(item => { return +item.value })
  //     return [{ name: '当日支付笔数', data }]
  //   },
  //   payRowsOptions () {
  //     const categories = this.payRows.map(item => { return item.key })
  //     return {
  //       chart: { toolbar: { show: false } },
  //       xaxis: { categories, labels: { show: false }, axisBorder: { show: false }, crosshairs: { show: false }, axisTicks: { show: false } },
  //       yaxis: { show: false }
  //     }
  //   },
  //
  //   // 访问量趋势
  //   visitTrendChartSeries () {
  //     const data = this.visitTrend.map(item => { return +item.value })
  //     return [{ name: '访问量趋势', data }]
  //   },
  //   visitTrendChartOptions () {
  //     const categories = this.visitTrend.map(item => { return item.key })
  //     return {
  //       xaxis: { categories },
  //     }
  //   },
  //
  //   // 人均搜索次数
  //   hotUserAvgSearchNumList () {
  //     return this.hotSearchSummary.hotUserAvgSearchNumList || []
  //   },
  //   hotUserAvgSearchNumSeries () {
  //     const data = this.hotUserAvgSearchNumList.map(item => { return +item.value })
  //     return [{ name: '搜索用户数', data }]
  //   },
  //   hotUserAvgSearchNumOptions () {
  //     const categories = this.hotUserAvgSearchNumList.map(item => { return item.key })
  //     return {
  //       chart: { toolbar: { show: false } },
  //       xaxis: { categories, labels: { show: false }, axisBorder: { show: false }, crosshairs: { show: false }, axisTicks: { show: false } },
  //       yaxis: { show: false }
  //     }
  //   },
  //
  //   // 搜索用户数
  //   hotUserNumList () {
  //     return this.hotSearchSummary.hotUserNumList || []
  //   },
  //   hotUserNumListSeries () {
  //     const data = this.hotUserNumList.map(item => { return +item.value })
  //     return [{ name: '搜索用户数', data }]
  //   },
  //   hotUserNumListOptions () {
  //     const categories = this.hotUserNumList.map(item => { return item.key })
  //     return {
  //       chart: { toolbar: { show: false } },
  //       xaxis: { categories, labels: { show: false }, axisBorder: { show: false }, crosshairs: { show: false }, axisTicks: { show: false } },
  //       yaxis: { show: false }
  //     }
  //   },
  //
  //   // 会员类型占比
  //   vipRateLabels () {
  //     return Object.keys(this.vipRate)
  //   },
  //   vipRateSeries () {
  //     return this.vipRateLabels.map(key => { return +this.vipRate[key] })
  //   },
  //   vipRateOptions () {
  //     return {
  //       labels: this.vipRateLabels.map(key => { return this.vipMap[key] }),
  //       plotOptions: {
  //         pie: {
  //           donut: {
  //             labels: {
  //               show: true,
  //               total: {
  //                 show: true,
  //                 label: '销售额',
  //                 formatter: function (w) {
  //                   const num =  w.globals.seriesTotals.reduce((a, b) => {
  //                     return a + b
  //                   }, 0)
  //                   return (num.toString().indexOf ('.') !== -1) ? '￥' + num.toLocaleString() : '￥' + num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
  //                 }
  //               }
  //             }
  //           }
  //         }
  //       }
  //     }
  //   }
  // },
  // filters: {
  //   toThousands (num) {
  //     if (!num) return 0
  //     return (num.toString().indexOf ('.') !== -1) ? num.toLocaleString() : num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
  //   }
  // },
  methods: {
    // handleTableChange(pagination, filters, sorter) {
    //   // 将这两个参数赋值给Vue data，用于后续使用
    //   this.paginationInfo = pagination;
    //   this.sortedInfo = sorter;
    //   this.fetch({
    //     ...this.params,
    //     sortField: sorter.field,
    //     sortOrder: sorter.order
    //   });
    // },
    //
    // fetch(params = {}) {
    //   this.loading = true;
    //   if (this.paginationInfo) {
    //     // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
    //     this.$refs.TableInfo.pagination.current = this.paginationInfo.current;
    //     this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize;
    //     params.pageSize = this.paginationInfo.pageSize;
    //     params.pageNum = this.paginationInfo.current;
    //   } else {
    //     // 如果分页信息为空，则设置为默认值
    //     params.pageSize = this.pagination.defaultPageSize;
    //     params.pageNum = this.pagination.defaultCurrent;
    //   }
    //   console.log(params);
    //   this.$get(apiURL.hotSearchList, {
    //     ...params
    //   }).then(r => {
    //     console.log(r);
    //     let data = r.data.data;
    //     let pagination = { ...this.pagination };
    //     pagination.total = data.total;
    //     this.dataSource = data.rows;
    //     this.pagination = pagination;
    //     this.loading = false;
    //   }).catch(e => {
    //     console.error(e);
    //     this.loading = false;
    //   });
    // },
  },
  mounted() {
    // this.fetch();
    //
    // this.$get(apiURL.hotSearchSummary, {})
    //   .then(r => {
    //     this.hotSearchSummary = r.data.data;
    //   })
    //   .catch(e => {
    //     this.$message.error('获取字典信息失败');
    // });
    //
    // this.$get(apiURL.topSummary, {})
    //   .then(r => {
    //     this.topSummary = r.data.data;
    //   })
    //   .catch(e => {
    //     this.$message.error('获取字典信息失败');
    // });
    //
    // this.$get(apiURL.visitTrend, {})
    //   .then(r => {
    //     this.visitTrend = r.data.data;
    //   })
    //   .catch(e => {
    //     this.$message.error('获取字典信息失败');
    // });
    //
    // this.$get(apiURL.vipRate, {})
    //   .then(r => {
    //     this.vipRate = r.data.data;
    //   })
    //   .catch(e => {
    //     this.$message.error('获取字典信息失败');
    // });
  }
};
</script>
<style lang="less">
//.rightbox-bgimg {
//  position: absolute;
//  /*  left: 20%;
//    top: 0%;*/
//  width: 100%;
//  height: 80%;
//  background-image: url(/static/img/homepage_bg.png);
//  background-size: 100% 100%;
//  background-position: center;
//  mix-blend-mode: multiply;
//}
//.home-page {
//  .head-info {
//    margin-bottom: 0.5rem;
//    margin-bottom: 0.5rem;
//    padding: 0 20px 0 0;
//  }
//}
//p {
//  margin-bottom: 0 !important;
//}
</style>
